<template>
  <div class="upload-container">
    <el-upload
      v-if="!disableUpload"
      :data="appendParams"
      :headers="headers"
      :show-file-list="false"
      :on-success="handleSuccess"
      :http-request="onUpload"
      :accept="acceptData"
      :action="action"
      :limit="uploadOptions.limit"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :disabled="disableUpload"
      :on-exceed="onExceed"
      :multiple="multiple"
      class="image-uploader"
    >
      <el-button
        size="small"
        type="primary"
      >点击上传</el-button>
      <div
        slot="tip"
        class="el-upload__tip"
      >
        <slot name="tips">
          <div v-if="tips">
            {{ tips }}
          </div>
        </slot>
      </div>
    </el-upload>
    <!-- 拖拽排序 -->
    <draggable
      v-if="fileList.length"
      :list="fileList"
      tag="div"
      v-bind="dragOptions"
      class="row-bg"
    >
      <div
        v-for="(item,index) in fileList"
        :key="index"
        v-loading="lazyLoading"
      >
        <div class="image-preview">
          <el-image
            v-if="item.url"
            :src="item.url"
            fit="cover"
          />
          <div class="image-preview-action">
            <span @click="handlePreview(item,index)">
              <i class="el-icon-zoom-in" />
            </span>
            <span @click="handleRemove(index)">
              <i class="el-icon-delete" />
            </span>
          </div>
          <el-input
            v-if="visibleInfo"
            v-model="fileList[index].description"
            type="textarea"
            rows="3"
            resize="none"
            @change="handleMark"
          />
        </div>
      </div>
    </draggable>
    <!-- 预览弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="450px"
    >
      <img
        width="100%"
        :src="dialogImageUrl"
        alt
      >
    </el-dialog>
  </div>
</template>

<script>
import draggable from '../mixins/draggable'
import upload from '../mixins/upload'
export default {
  name: 'Gallery',
  mixins: [upload, draggable]
}
</script>
<style lang="scss">
:root {
  --grid-column-width: 20%;
}
</style>
<style lang="scss" scoped>
.upload-container {
  width: 100%;
  position: relative;

  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    width: 200px;
    border-radius: 4px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  >>> .el-textarea__inner {
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .el-image {
    border-radius: 4px 4px 0 0;
    display: block;
  }

  .row-bg {
    padding: 10px 0;
    margin: 0;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, calc(var(--grid-column-width) - 10px));
    &__item {
      font-size: 0;
      border: 1px solid transparent;
    }
  }

  .image-preview {
    position: relative;
    border: 1px dashed #d9d9d9;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    min-height: 36px;

    .image-preview-action {
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s;
      cursor: pointer;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
    }
    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }
}
</style>
